<style scoped>
    .page_top {
        width: 800px;
        height: 30px;
        margin: 10px auto;
    }
    .text_blue {
        cursor: pointer;
        color: rgb(59, 166, 211);
    }
    .nt-radio-group.radio_main{
        line-height: 64px;
        border-bottom: 1px dotted #ccc;
        width: 625px;
        margin: 0 auto;
        display: block;
    }
    .nt-radio-group.radio_main .nt-radio{
        margin-right:80px;
    }
</style>
<template>
    <div>
        <nt-row class="title_main">
            <nt-col :span="12">实名认证<img src="../../images/default_img.jpg" width="20" height="20" /></nt-col>
            <nt-col :span="12" align="right"><span class="text_blue" @click="goBack"><i class="nt-icon-xbn-20 mR5"></i>返回</span></nt-col>
        </nt-row>
        <div >
            <nt-radio-group v-model="radio" class="radio_main">
                <nt-radio :label="1">个人</nt-radio>
                <nt-radio :label="2">中国大陆企业</nt-radio>
                <nt-radio :label="3">香港企业</nt-radio>
            </nt-radio-group>
        </div>
        <keep-alive>
            <component v-bind:is="currentTab"></component>
        </keep-alive>

    </div>

</template>
<script>
    import personal from './verified-personal.vue';
    import company from './verified-company.vue';
    import HKCompany from './verified-hk-company.vue';

    export default {
        data: function () {
            return {
                radio: 1,
                currentTab: personal
            }
        },
        components: {
            personal,
            company,
            HKCompany
        },
        watch: {
            radio(label) {
                switch (label) {
                    case 1:
                        this.toggleTab(personal)
                        break;
                    case 2:
                        this.toggleTab(company)
                        break;
                    case 3:
                        this.toggleTab(HKCompany)
                        break;
                    default:
                        break;
                }
                console.log('xxx' + label);
            }
        },
        created: function () {
        },
        methods: {
            toggleTab(tab) {
                this.currentTab = tab;
            },
            goBack() {
                this.$router.go(-1);
            }
        },
    }
</script>